<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>${title}</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=${google-map-key}"
                type="text/javascript"></script>
        <script type="text/javascript">
            function load() {
                if (GBrowserIsCompatible()) {
                    var map = new GMap2(document.getElementById("map"));
                    var polyline = new GPolyline.fromEncoded(${track});
                    var bounds = polyline.getBounds();
                    map.setCenter(bounds.getCenter(),
                    map.getBoundsZoomLevel(bounds));
                    map.addMapType(G_PHYSICAL_MAP);
                    map.setMapType(G_PHYSICAL_MAP);
                    map.addOverlay(polyline);
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GMapTypeControl());
                    map.addControl(new GScaleControl());
                }
            }
        </script>
        <style type="text/css">
#wrapper {
	margin: auto;
        width: 600px;
}
table {
    margin: auto;
}
th,td {
    white-space: nowrap;
}
th {
    font-weight: normal;
    text-align: left;
}
td {
    font-weight: bold;
    text-align: right;
}
td#maps {
    text-align: left;
}
        </style>
    </head>
#set( $pattern = '#,##0' )
    <body onload="load()" onunload="GUnload()">
        <div id="wrapper">
            <a rel="external" target="_blank" href="track.gpx">Trace GPX</a>,
            <a rel="external" target="_blank" href="index.html">Galerie de photos</a>
            <div id="map" style="width: 600px; height: 600px"></div>
            <img src="profile.png" alt="Profile"/>
            <table cellspacing="4" cellpadding="0">
                <tbody>
                    <tr>
                        <th>Altitude min/max:</th>
                        <td>${util.formatDouble($summary.minElevation,$pattern)}m</td>
                        <td>${util.formatDouble($summary.maxElevation,$pattern)}m</td>
                    </tr>
                    <tr>
                        <th>Dénivelé:</th>
                        <td>+${util.formatDouble($summary.ascent,$pattern)}m</td>
                        <td>-${util.formatDouble($summary.descent,$pattern)}m</td>
                    </tr>
                    <tr>
                        <th>Distance:</th>
                        <td>${util.formatDouble($summary.distance,$pattern)}m</td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>Cartes:</th>
                        <td id="maps" colspan="2">
#set( $first = true )
#foreach ( $map in $maps )#if( $first )#set( $first = false )#else, #{end}CN$map#end
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
